/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 胜负彩选择页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Accordion,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 列表数据
      listData: [{
        id: 1,
        name: '世界杯',
        date: '07-10',
        time: '02:00',
        hostName: '法国',
        guessName: '比利时',
        value: [2.48, 3.24, 3.05], // 胜平负赔率
      },
      {
        id: 2,
        name: '世界杯',
        date: '07-10',
        time: '02:00',
        hostName: '克罗地亚',
        guessName: '英格兰',
        value: [2.48, 3.24, 3.05], // 胜平负赔率
      }],
      // 选中的
      checkedData: {},
    }
  }

  /**
   * 点击玩法介绍
   */
  onClickWFJS=() => {
    // ..TODO
    Toast.info('完善中...', 1)
  }


  /**
   * 选好彩票
   */
  onNext=() => {
    console.log('选号了')
    // 跳转到提交页面
    this.props.history.push('/sfc/submit')
  }

  /**
   * 生成标题
   */
  createTitle=() => '直选'


  /**
   * 选中一个球
   */
  onCheck=(item, value) => {
    const { checkedData } = this.state

    if (!checkedData[item.id]) {
      checkedData[item.id] = { value: [value] }
    } else {
      const fi = checkedData[item.id].value.findIndex(v => v === value)
      if (fi !== -1) {
        checkedData[item.id].value.splice(fi, 1)
      } else {
        checkedData[item.id].value.push(value)
      }
    }
    this.setState({
      checkedData,
    })
  }


  /**
   * 清空所有
   */
  onClearAll=() => {
    this.setState({
      checkedData: {},
    })
  }

  render() {
    const {
      listData,
      checkedData,
    } = this.state
    const title = this.createTitle()
    const tabs = [
      { title: '购彩', sub: '1' },
      { title: '开奖', sub: '2' },
    ]
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={null}
        />
        <div className="page-content contain-footer sfc-container">
          <Tabs tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
          >
            <div>
              <div className="desc-bar">
                <p>07-10 22:40 截止</p>
              </div>
              <div className="content-wrap">
                {
                  listData.map((item, index) => {
                    const result = (
                      <div className="list-box" key={index.toString()}>
                        <div className="item-left">
                          <p>{index + 1}、{item.name}</p>
                          <p>{item.date}</p>
                          <p>{item.time}</p>
                        </div>
                        <div className="item-right">
                          <div onClick={() => this.onCheck(item, item.value[0])} className={checkedData[item.id] && checkedData[item.id].value.indexOf(item.value[0]) !== -1 ? 'right-box checked' : 'right-box'}>
                            <p>{item.hostName}</p>
                            <p>主胜{item.value[0]}</p>
                          </div>
                          <div onClick={() => this.onCheck(item, item.value[1])} className={checkedData[item.id] && checkedData[item.id].value.indexOf(item.value[1]) !== -1 ? 'right-box checked' : 'right-box'}>
                            <p>VS</p>
                            <p>平{item.value[1]}</p>
                          </div>
                          <div onClick={() => this.onCheck(item, item.value[2])} className={checkedData[item.id] && checkedData[item.id].value.indexOf(item.value[2]) !== -1 ? 'right-box checked' : 'right-box'}>
                            <p>{item.guessName}</p>
                            <p>客胜{item.value[2]}</p>
                          </div>
                        </div>
                      </div>
                    )
                    return result
                  })
                }
              </div>

            </div>
            <div>
              开奖页面
            </div>
          </Tabs>
        </div>
        <div className="page-footer">
          <div className="jczq-footer">
            <div className="left-icon" onClick={this.onClearAll}><img src="resource/image/delete.png" alt="" /></div>
            <div className="divider-vertical" />
            <div className="right-content">
              <p>至少选<span className="font-red">14</span>场比赛</p>
              <p>开奖结果不包含加时赛和点球大战</p>
            </div>
            <Button type="red" disabled={false} onClick={this.onNext}>选好了</Button>
          </div>
        </div>
      </div>
    )
  }
}
